<template>
  <basic-container>
    <div class="grid-content bg-purple">
      <el-form :model="ruleForm1" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-halfCharCode type="text" v-model="ruleForm1.username" disabled />
        </el-form-item>
        <el-form-item label="真实姓名" prop="username">
          <el-input v-halfCharCode type="text" v-model="ruleForm1.realName" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-halfCharCode v-model="ruleForm1.phone" placeholder="验证码登录使用" />
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <el-upload action="jzgl/admin/sys-file/upload" :limit="1" listType="picture-card" :on-success="success" :show-file-list="false" :file-list="[]" :data="{busiId: ruleForm1.userId}">
            <div v-if="imageUrl" class="avatar" :style="'background-image:url('+imageUrl+')'"></div>
            <i v-else class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip" v-if="!imageUrl">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm1')">提交</el-button>
          <!-- <el-button @click="resetForm('ruleForm1')">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </basic-container>
</template>


<script>
import { handleDown } from "@/admin/api/user"
import { mapState } from 'vuex'
import store from "@/store"
import request from '@/plugins/axios'
import dbl from '@/utils/dbl'

export default {
  data () {
    return {
      imageUrl: '',
      ruleForm1: {
        username: '',
        realName: '',
        avatar: '',
        phone: '',
      },
    }
  },
  created () {

    this.ruleForm1.username = this.userInfo.username
    this.ruleForm1.realName = this.userInfo.realName
    this.ruleForm1.phone = this.userInfo.phone
    this.ruleForm1.userId = this.userInfo.userId

    this.imageUrl = this.userInfo.avatar
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.user
    }),
  },
  methods: {
    success (response, file, fileList) {
      this.imageUrl = 'jzgl/admin/sys-file/img/' + response.data
      this.ruleForm1.avatar = this.imageUrl
    },

    submitForm (formName) {
      request({
        url: '/admin/user/edit',
        method: 'put',
        data: this.ruleForm1
      }).then(response => {
        if (response.data.data) {
          this.$notify({
            title: '成功',
            message: '修改成功',
            type: 'success',
            duration: 2000
          })
          let user = dbl.get('user')

          user.avatar = this.ruleForm1.avatar

          this.$store.commit('SET_USER', user)
        } else {
          this.$notify({
            title: '失败',
            message: response.data.msg,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(() => {
        this.$notify({
          title: '失败',
          message: '修改失败',
          type: 'error',
          duration: 2000
        })
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px !important;
  color: #8c939d !important;
  width: 178px !important;
  height: 178px !important;
  line-height: 178px !important;
  text-align: center !important;
}

.avatar {
  width: 146px;
  height: 146px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
